<template>
	<view class="h5_padding">
		<view class="mall_cell">
			<image class="img" mode="aspectFill" :src="item.coverImage"></image>
			<view class="name">
			 {{item.serviceName}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "mall-cell",
		props: {
			item: {
				type: Object,
				default: {},
				required: true,
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.mall_cell {
		// margin-right: 62rpx;
		margin-top: 43rpx;
		max-width: 344rpx;
		overflow: hidden;
		.img {
			width: 413rpx;
			height: 338rpx;
			// background-color: #C0C0C0;
		}

		.name {
			text-align: center;
			margin-top: 35rpx;

			font-size: 22rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333330;
			line-height: 30rpx;
			letter-spacing: 2rpx;
		}
	}
	@media screen and (max-width:750px) {
		 .mall_cell{
			  
			 box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.13);
			 border-radius: 10rpx;
			 overflow: hidden;
			 max-width: 334rpx;
			 .img {
			 	width: 334rpx;
			 	height: 284rpx;
			 	// background-color: #C0C0C0;
			 }
			 .name { 
			 	margin-top: 0rpx;
			 	font-size: 20rpx;
			 	font-family: PingFangSC-Regular, PingFang SC;
			 	font-weight: 400;
			 	color: #333333;
			 	line-height: 72rpx;
				
				  overflow: hidden;
					word-break: break-all;  /* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;  /* 超出部分省略号 */
					display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 1; /** 显示的行数 **/
			 }
		 }
	}
</style>
